<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8" />
  <title>Particleground demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css" />
  <script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
  <script type='text/javascript' src='jquery.particleground.min.js'></script>
  <link rel="stylesheet" href="js/bootstrap.min.js">
  <link rel="stylesheet" href="src/css/swiper.min.css">
  <link rel="stylesheet" href="css/pcSwiper.css">
  <link rel="stylesheet" href="css/phoneStyle.css" />

  <script src="src/js/islider.js"></script>
  <script src="src/js/islider_desktop.js"></script>
</head>
<body>
<!--导航条-->
<div class="headerTitle">
  <img src="images/积木科技logo.png" alt="">
  <ul>
    <li><a href="#particles">首页</a></li>
    <li><a href="#content-aboutOur">关于我们</a></li>
    <li><a href="#headerTitle-rongqi">案例</a></li>
    <li><a href="#content-zhaoPin">招聘</a></li>
    <li><a href="#content-boke">博客</a></li>
    <li><a href="#content-lianxi">联系我们</a></li>
  </ul>
</div>
<!--首页头部-->
<div id="particles">
  <div class="intro">
    <h1>积木网络</h1>
    <p>积木网络介绍积木网络介绍积木网络介绍积木网络介绍积木网络介绍积木网络介绍</p>
  </div>
</div>
<!--内容 col-lg-12 col-md-12 col-sm-12-->
<div class="content">

  <div id="content-aboutOur" class="content-aboutOur" >
    <div class="headerTitle-rongqi">
      <hr class="header-line">
      <span class="header-title">开发与流程</span>
      <hr class="header-line">
    </div>

    <ul>
      <li><a href=""><img src="images/网站.png" alt="">网站建设</a></li>
      <li><a href=""><img src="images/APP.png" alt="">APP定制</a></li>
      <li><a href=""><img src="images/小程序.png" alt="">小程序开发</a></li>
      <li><a href=""><img src="images/H5.png" alt="">H5页面制作</a></li>
    </ul>

  </div>
  <div id="headerTitle-rongqi" class="headerTitle-rongqi">
    <hr class="header-line">
    <span class="header-title">案例展示</span>
    <hr class="header-line">
  </div>
  <!--轮播图-->
  <!--<h4 style="text-align: center">animateTyp</h4>-->

  <div id="iSlider-effect-wrapper" >
    <div id="animation-effect" class="iSlider-effect"></div>
  </div>
  <div class="scontainer">
    <!--电脑轮播-->
    <div class="swiper-bg">
      <img src="src/images/computer.png" style="top: -47.35px;">
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-100">Slide 1</div>
          <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
          <div class="text" data-swiper-parallax="-300">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-100">Slide 2</div>
          <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
          <div class="text" data-swiper-parallax="-300">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-100">Slide 3</div>
          <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
          <div class="text" data-swiper-parallax="-300">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
          </div>
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- Add Navigation -->
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </div>
  </div>

  <!--案例动画-->
  <div class="content-anliDonghua">
    <div class="headerTitle-rongqi">
      <hr class="header-line">
      <span class="header-title">XXXXXXX</span>
      <hr class="header-line">
    </div>
    <div class="row">
      <div class="bigPT">
        <img src="src/images/3.jpg" alt="">
      </div>
      <div class="smallPT">
        <img src="src/images/2.jpg" alt="">
      </div>
    </div>
    <div class="row">
      <div class="smallPT">
        <img src="src/images/1.jpg" alt="">
      </div>
      <div class="bigPT">
        <img src="src/images/5.jpg" alt="">
      </div>
    </div>

    <div class="content-anliDonghua-footerTitle">
      <p>Talk is cheap,show me the code!</p>
      <a href="">加入我们</a>

    </div>
  </div>
  <!--联系我们-->
  <div id="content-lianxi" class="content-lianxi">
    <div class="content-footer-row">
    <div class="content-footer-jieshao col-xs-12 col-sm-2">
      <div class="content-footer-headerTitle">常见问题</div>
      <ul>
        <li><a href="">XXXXXX</a></li>
        <li><a href="">XXXXXX</a></li>
        <li><a href="">XXXXXX</a></li>
      </ul>
    </div>
    <div class="content-footer-jieshao col-xs-12 col-sm-2">
      <div class="content-footer-headerTitle">免责声明</div>
      <ul>
        <li><a href="">XXXXXX</a></li>
        <li><a href="">XXXXXX</a></li>
        <li><a href="">XXXXXX</a></li>
      </ul>
    </div>
      <div class="content-footer-jieshao col-xs-12 col-sm-2">
        <div class="content-footer-headerTitle">服务内容</div>
        <ul>
          <li><a href="">XXXXXX</a></li>
          <li><a href="">XXXXXX</a></li>
          <li><a href="">XXXXXX</a></li>
        </ul>
      </div>
      <div class="content-footer-jieshao col-xs-12 col-sm-2">
        <div class="content-footer-headerTitle">意见反馈</div>
        <ul>
          <li><a href="">XXXXXX</a></li>
          <li><a href="">XXXXXX</a></li>
          <li><a href="">XXXXXX</a></li>
        </ul>
      </div>

      <div class="content-footer-jieshao col-xs-12 col-sm-2 content-footer-icon">
        <ul>
          <li><a href=""><img src="images/微博.png" alt=""></a></li>
          <li><a href=""><img src="images/微信.png" alt=""></a></li>
          <li><a href=""><img src="images/twitter.png" alt=""></a></li>
          <li><a href=""><img src="images/facebook.png" alt=""></a></li>
        </ul>
      </div>
    </div>


  </div>

  <div class="content-footer">
    <span>版权所有:宁波积木有限公司  固定电话:0574-888888888</span>
    <p>地址:XXXXXX</p>
  </div>


</div>
<div class="zhiding"><a href="#particles"><img src="images/置顶.png" alt=""></a></div>
<script src="src/js/swiper.min.js"></script>
<script type="text/javascript">
  var picList = [
    {
      width: '100%',
      height: '100%',
      content: "src/images/1.jpg",
    },
    {
      width: '100%',
      height: '100%',
      content: "src/images/2.jpg",
    },
    {
      width: '100%',
      height: '100%',
      content: "src/images/3.jpg",
    },
  ];


  //all animation effect
  var islider1 = new iSlider({
    data: picList,
    dom: document.getElementById("animation-effect"),
    duration: 2000,
    animateType: 'rotate',
    isAutoplay: true,
    isLooping: true,
    // isVertical: true, 是否垂直滚动
  });
  islider1.bindMouse();
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    parallax: true,
    speed: 600,
    autoplay:2000,
    loop:true,
    autoplayDisableOnInteraction :false,


  });

$(document).ready(function() {
  $('#particles').particleground({
    dotColor: '#fff',
    lineColor: '#fff'
  });
  $('.intro').css({
    'margin-top': -($('.intro').height() / 2)
  });

  $('.zhiding').hide()
});

window.onscroll = function () {
  //得到向下滑动的距离
  var topHeight = $(window).scrollTop();
  var windowHeight = $(window).height();
  if(topHeight>(windowHeight/2)){
    $('.zhiding').show()
    $('.headerTitle').css({'background-color':'#06b6ff'})
  }else {
    $('.zhiding').hide()
    $('.headerTitle').css({'background-color':'rgba(51,51,51,1.0)'})
  }
//  $('.titleContent').css('top',topHeight);

}
</script>
</body>
</html>
